<template>
  <div>
    <div class="q-pa-md" style="max-width: 400px">
      <div class="q-gutter-md">
        <q-select
          v-model="productItem"
          :options="productList"
          label="产品名称"
          @update:model-value='selectProductName'
        />
      </div>
    </div>
    <div>
      <q-btn label="产品树" color="secondary" @click="alert = true" />
      <q-dialog
        v-model="alert"
        full-width
      >
        <q-card style='height: 500px'>
          <q-card-section>
            <TreeEntity
              :reqData='reqData'
              :tickType='mode'
              v-model:tickObj='ticked'
              @update:ticked='tickedFn'
            />
          </q-card-section>

          <q-card-actions align="right" class="bg-white text-teal">
            <q-btn flat label="OK" v-close-popup @click='closeDialog' />
          </q-card-actions>

        </q-card>
      </q-dialog>
    </div>
    <q-btn label="批量报价" color="primary" @click='caculatePrice'/>
    <div v-for='item in priceArray'>
      {{item}}
    </div>
    
  </div>
</template>

<script lang='ts'>
import { api } from 'boot/axios';
import {ref, reactive, onMounted} from 'vue'
import { postRequest } from '../../components/functions'
import { useStore } from '../../store'
import { useRoute } from 'vue-router'
import { ChanReqData } from 'pages/tree/model/Interfaces'
import TreeEntity from '../tree/TreeEntity.vue'

export default {
  name: 'BatchPrice',
  components: {TreeEntity},
  setup() {
    let rote = useRoute()
    const store = useStore()
    const userData = store.state.sphinx.userData
    let entityCode = ref(rote.query.entityCode)
    let childCode = ref(rote.query.childCode)
    let productItem = ref('')
    let priceArray = ref()

    //获取产品名称列表
    let productList = reactive([])
    function getProductNameList() {
      postRequest('transaction/product/querySeries1',{"companyId":userData.companyId},res => {
        res.forEach((item,index,array)=>{
          productList.push({"label":item.seriesName,"value":item.seriesNo})
        })
      })
    }


    let alert = ref(false)
    let mode = ref('leaf')
    let ticked = ref([])
    let reqData = ref<ChanReqData>({
      "entityCode":"301",
      "entityType":"01",
      "length": "999",
      "isRoot":"0",
      "chainHead":"0",
      "entityNo":""
    })

    //获取产品树代码
    function getProductCode() {
      let reqCodeData = []
      console.log("ticked",ticked);
      
      ticked.value.forEach((item,index,array)=>{
        // console.log("item1111111111",item);
        
        const {id,chainTail,chainHead,codeName,entityCode,entityType,typeName,entityNo,propertyCodeName} = item.relationNode
        console.log("item.relationNode",item.relationNode);
        
        reqCodeData.push({
          "id":id,
          "chainHead":chainHead,
          "entityCode":entityCode,
          "codeName":codeName,
          "entityType":entityType,
          "typeName":typeName,
          "entityNo":entityNo,
          "entityNoName":propertyCodeName,
          "companyId":userData.companyId,
          "companyName":userData.companyName,
          "chainTail":chainTail
        })
      })
      postRequest('/route/route/insertNoTree',reqCodeData,res=>{
        console.log(res);
      })
    }
    //关闭对话框
    function closeDialog() {
      getProductCode()
    }
    //选择树节点时触发的函数
    function tickedFn(tickedId) {
      console.log(tickedId);
    }

    //计算报价
    function caculatePrice() {
      let requestData = {
        "codeRelVO" : reqData.value,
        "chains":ticked.value
      }
      api.post('/transaction/price/caculateList',requestData).then(res=>{
        let tempArr = res.data
        priceArray.value = tempArr
      })
     
    }

    function selectProductName() {
      reqData.value.entityNo = productItem.value['value']
    }
    

    onMounted(()=>{
      getProductNameList()
    })
    return {
      productList,
      getProductNameList,
      entityCode,
      childCode,
      productItem,
      alert,
      closeDialog,
      reqData,
      mode,
      ticked,
      tickedFn,
      caculatePrice,
      selectProductName,
      priceArray
    }
  }
};
</script>

<style scoped>

</style>
